import React, { Children, Component } from 'react'
import {
    DesktopOutlined,
    PieChartOutlined,
    TeamOutlined,
    UserOutlined,
} from '@ant-design/icons';
import { Menu } from 'antd';
import { Link, withRouter } from 'react-router-dom';
import { getStorage } from '../utils/stroage';

const { SubMenu } = Menu;
const sidebarList = [
    {
        title: '首页',
        path: '/home',
        icon: <PieChartOutlined />
    },
    {
        title: '用户管理',
        path: '/users',
        icon: <PieChartOutlined />
    },
    {
        title: '角色管理',
        path: '/role',
        icon: <PieChartOutlined />
    },
    {
        title: '商品管理',
        path: '/products',
        icon: <PieChartOutlined />,
        Children: [
            {
                title: '品种管理',
                path: '/products/categories',
            },
            {
                title: '商品列表',
                path: '/products/list',
            }
        ]
    },
    {
        title: '财务统计',
        path: '/finances',
        icon: <PieChartOutlined />
    },
]
class TheSidebar extends Component {
    state = {
        menus: []
    }
    componentDidMount() {
        const { role: { menus } } = getStorage('userInfo')
        // console.log(menus);
        this.setState({ menus })
    }
    sidebarRender = (list) => {
        return list.map(item => {
            if (this.state.menus.includes(item.path)) {
                if (item.Children) {
                    return (<SubMenu key={item.path} icon={item.icon} title={item.title}>
                        {
                            this.sidebarRender(item.Children)
                        }
                    </SubMenu>)
                }
                return <Menu.Item key={item.path} icon={item.icon} title={item.title}><Link to={item.path}>{item.title}</Link></Menu.Item>
            }
        })
    }
    render() {
        return (
            <Menu theme="dark"
                mode="inline"
                defaultSelectedKeys={[this.props.history.location.pathname]}  //   刷新后默认是选中的页面
                //   刷新后让数组中的二级菜单保持打开状态，因为react它默认会收起，这是一个遗留问题
                defaultOpenKeys={['products', 'finances']}>

                {this.sidebarRender(sidebarList)}


            </Menu>
        )
    }
}
export default withRouter(TheSidebar)